<template>
	<view class="search-empty">
		<view class="empty-image">
			<text class="empty-icon">🔍</text>
		</view>
		<view class="empty-text">
			<text class="empty-title">{{ title }}</text>
			<text class="empty-subtitle">{{ subtitle }}</text>
		</view>
		<view class="empty-suggestions" v-if="suggestions.length > 0">
			<text class="suggestions-title">试试这些关键词：</text>
			<view class="suggestions-list">
				<view class="suggestion-item" v-for="(item, index) in suggestions" :key="index"
					@click="handleSuggestionClick(item)">
					{{ item }}
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		defineProps,
		defineEmits
	} from 'vue'

	const props = defineProps({
		title: {
			type: String,
			default: '没有找到相关内容'
		},
		subtitle: {
			type: String,
			default: '试试其他关键词吧'
		},
		suggestions: {
			type: Array,
			default: () => ['热门', '推荐', '新鲜事', '科技', '生活']
		}
	})

	const emit = defineEmits(['suggestionClick'])

	const handleSuggestionClick = (suggestion) => {
		emit('suggestionClick', suggestion)
	}
</script>

<style lang="scss" scoped>
	.search-empty {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 120rpx 40rpx;
		text-align: center;

		.empty-image {
			margin-bottom: 40rpx;

			.empty-icon {
				font-size: 120rpx;
				opacity: 0.3;
			}
		}

		.empty-text {
			margin-bottom: 60rpx;

			.empty-title {
				display: block;
				font-size: 32rpx;
				color: #666;
				margin-bottom: 16rpx;
			}

			.empty-subtitle {
				display: block;
				font-size: 28rpx;
				color: #999;
			}
		}

		.empty-suggestions {
			width: 100%;

			.suggestions-title {
				display: block;
				font-size: 28rpx;
				color: #666;
				margin-bottom: 24rpx;
			}

			.suggestions-list {
				display: flex;
				flex-wrap: wrap;
				gap: 16rpx;
				justify-content: center;

				.suggestion-item {
					padding: 16rpx 24rpx;
					background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
					color: white;
					border-radius: 30rpx;
					font-size: 28rpx;
					transition: all 0.3s ease;

					&:active {
						transform: scale(0.95);
					}
				}
			}
		}
	}
</style>